<template>
  <div class="dashboard-container">
    <!--第一横栏开始-->
    <el-row class="row1" type="flex" justify="left">
      <el-col :span="8">
        <p style="font-size: larger">缺陷流程定制</p>
      </el-col>
      <el-col :offset="16" :span="7" style="margin-top: 15px">
        <span
          ><el-button disabled class="proButton" type="success"
            >管理缺陷状态</el-button
          ></span
        >
      </el-col>
    </el-row>
    <!--第一横栏结束-->
    <el-divider></el-divider>
    <el-alert
      style="width: 100%; color: #9c631d"
      type="warning"
      :closable="false"
    >
      <template slot="title">
        <div>
          <span>温馨提示:</span
          ><span style="margin-left: 15px"
            >1.该功能因一些原因暂时停止自定义流程</span
          >
        </div>
      </template>
    </el-alert>
    <el-button class="proButton margin-top" disabled>添加流程</el-button>
    <div class="table_div">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="流程名称" prop="name"> </el-table-column>

        <el-table-column label="操作">
          <template>
            <span><el-button type="text" class="operate" @click="dialogTableVisible = true">查看</el-button></span>
            <el-divider direction="vertical"></el-divider>
            <span
              ><el-button type="text" class="operate" disabled
                >修改流程</el-button
              ></span
            >
            <el-divider direction="vertical"></el-divider>
            <span><el-button type="text" class="operateDelete" disabled>删除流程</el-button></span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 弹出框 -->
    <el-dialog title="查看缺陷流程" :visible.sync="dialogTableVisible">
      <p>缺陷流程名称：TCE默认流程第一步处理人：项目经理</p>
      <div class="processTable">
        <el-table :data="processData" style="width: 100%">
          <el-table-column label="起始状态">
            <template slot-scope="scope">
              <span class="process_div">{{ scope.row.star }}</span>
            </template>
          </el-table-column>

          <el-table-column label="目标状态处理角色">
            <template slot-scope="scope">
              <span>{{ scope.row.role }}</span>
            </template>
          </el-table-column>

          <el-table-column label="目标状态">
            <template slot-scope="scope">
              <span class="process_div">{{ scope.row.end }}</span>
            </template>
          </el-table-column>

          <el-table-column label="默认开始">
            <template slot-scope="scope">
              <span>{{ scope.row.defaultStar }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="proButton" @click="dialogTableVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "processCustomization",
  data() {
    return {
      tableData: [
        {
          name: "TCE默认流程",
        },
      ],
      dialogTableVisible: false, //弹出框是否显示的值
      processData: [
        {
          star: "新建",
          role: "项目经理,开发工程师",
          end: "分配",
          defaultStar: "默认开始",
        },
        {
          star: "分配",
          role: "项目经理,开发工程师",
          end: "确认",
        },
        {
          star: "分配",
          role: "项目经理,测试工程师",
          end: "驳回",
        },
        {
          star: "确认",
          role: "项目经理,测试工程师",
          end: "修改完成",
        },
        {
          star: "修改完成",
          role: "项目经理,测试工程师",
          end: "关闭",
        },
        {
          star: "修改完成",
          role: "项目经理",
          end: "重开",
        },
        {
          star: "关闭",
          role: "项目经理",
          end: "重开",
        },
        {
          star: "驳回",
          role: "项目经理,测试工程师",
          end: "关闭",
        },
        {
          star: "驳回",
          role: "项目经理",
          end: "重开",
        },
        {
          star: "重开",
          role: "项目经理,开发工程师",
          end: "分配",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.margin-top {
  margin-top: 15px;
}
.table_div {
  margin-top: 15px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.process_div,
.operate {
  color: #409eff;
}
.operateDelete {
  color: #f56c6c;
}
.processTable{
  width: 100%;
  height: 300px;
  overflow-y:scroll; 
  overflow-x:hidden;
}
</style>